<template>
	<view   class="gaitou">
		<!-- 标题 -->
		<view class="nav">
			<view>修改头像</view>
			<image src="/static/index/tui.png" mode="" @click="toBack"></image>
		</view>
		<!-- 头像 -->
		<view class="img">
			<image :src="titleImg" mode=""></image>
		</view>
		<u-gap height="18" bg-color="#F6F6F6"></u-gap>
		<!-- 头像列表 -->
		<view class="list">
			<view class="list-title">
				可选头像
			</view>
			<scroll-view class="scroll-view" scroll-y="true">
				<view class="list-item">
					<view class="list-item_icon" v-for="(item,index) in img" :key="index" @click="activeImg(item,index)">
						<image :src="item.img" mode="" :class="{active:item.id == imgIndex}"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="btn">
			<view class="btn-btn" :class="{btnActive:classIndex == 1}" @click="submit">确定更换</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleImg:"/static/static/role/role_14.png", //存放头像
				imgIndex:Number,  //图片索引修改样式
				img:[
					{img:"/static/static/role/role_4.png",id:0},
					{img:"/static/static/role/role_6.png",id:1},
					{img:"/static/static/role/role_8.png",id:2},
					{img:"/static/static/role/role_10.png",id:3},
					{img:"/static/static/role/role_12.png",id:4},
					{img:"/static/static/role/role_14.png",id:5},
					{img:"/static/static/role/role_16.png",id:6},
					{img:"/static/static/role/role_18.png",id:7},
				], //头像列表
				classIndex:Number,  //按钮
			}
		},
		onShow(){
			try {
			    const value = uni.getStorageSync('touImage');
			    if (value) {
			        console.log(value);
					this.titleImg = value
			    }
			} catch (e) {
			    // error
			}
		},
		methods: {
			submit(){ // 修改头像,传递头像参数
				// uni.navigateTo({
				//     url: '/pages/my/jiben/jiben?img='+this.titleImg
				// });
				// uni.$emit('touImage',this.titleImg)
				//修改头像,将头像数据存储
				try {
				    uni.setStorageSync('touImage',this.titleImg);
				} catch (e) {
				    // error
				}
				uni.navigateTo({
				    url: '/pages/my/jiben/jiben?img='
				});
			},
			toBack(){  // 返回上一级
				uni.navigateTo({
				    url: '/pages/my/jiben/jiben'
				});
			},
			activeImg(item,index){
				// console.log(item,index)
				this.imgIndex = index
				this.titleImg = item.img
				this.classIndex  = 1
			}
		}
	}
</script>

<style scoped lang="scss">
.gaitou{
	// padding: 35rpx 54rpx 0 35rpx;
	.nav{
		// margin-top: 20rpx;
		padding: 87rpx 54rpx 0 35rpx;
		display: flex;
		justify-content: space-between;
		image{
			width: 48rpx;
			height: 48rpx;
		}
		view{
			font-size: 46rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #000000;
		}
		}
	.img{
		display: flex;
		justify-content: center;
		padding: 36rpx  0  52rpx;
		// background-color: #18B566;
		box-sizing: border-box;
		image{
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
		}
	}
	.list{
		padding: 35rpx 54rpx 0 35rpx;
		.list-title{
			font-size: 38rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #000000;
		}
		.scroll-view{
			height: 650rpx;
			.list-item{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 15rpx;
				.list-item_icon{
					margin: 37rpx 0 0;
					image{
						width: 164rpx;
						height: 164rpx;
						border-radius: 50%;
					}
					.active{
						transform:scale(1.1);
					}
				}
			}
		}
		
		
	}
	.btn{
		display: flex;
		justify-content: center;
		height: 100%;
		// position: relative;
		.btn-btn{
			width: 678rpx;
			height: 88rpx;
			background: #B8B8B8;
			border-radius: 43rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FEFEFE;
			position: absolute;
			bottom: 52rpx;
		}
		.btnActive{
			width: 678rpx;
			height: 88rpx;
			background: #ff55ff;
			border-radius: 43rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FEFEFE;
			position: absolute;
			bottom: 52rpx;
		}
	}
}
</style>
